<template>
  <div class="details">
    <el-form label-width="100px">
      <el-form-item label="标题">
        <el-input v-model="params.title" maxlength="100" placeholder="请输入标题，100以内"></el-input>
      </el-form-item>
      <el-form-item label="资讯分类">
        <el-select class="btn" v-model="params.newsType" placeholder="资讯分类">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详情">
        <Tinymce ref="editor" :height="400" v-model="params.content"/>
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="params.source" placeholder="请输入来源"></el-input>
      </el-form-item>
      <el-form-item label="热门">
        <el-checkbox v-model="params.hot"></el-checkbox>
      </el-form-item>
      <!-- <el-form-item label="排序">
        <el-input v-model="params.queue"></el-input>
      </el-form-item> -->
      <el-form-item label="封面">
        <el-select :disabled="disabled" @change='changeImg' class="btn" v-model="projectImages" placeholder="请选择封面类型">
          <el-option
            v-for="item in projectImgList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>

      </el-form-item>

      <el-form-item v-if="projectImages === '大封面'" label="大封面">
        <div class="voucher">
          <el-upload
            class="upload-demo"
            :action="uploadAction"
            name="userfile"
            :show-file-list="false"
            :on-success="handleAvatarBigSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="voucherText">
            <p>上传项目封面，670x376宽高大小</p>
          </div>
        </div>
        <div v-if="projectImagesStatus" class="imgListBig">
          <div>
            <img :src="params.bigCoverImage" alt>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="projectImages === '小封面'" label="小封面">
        <div class="voucher">
          <el-upload
            class="upload-demo"
            :action="uploadAction"
            name="userfile"
            :show-file-list="false"
            :on-success="handleAvatarSmailSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="voucherText">
            <p>上传项目封面，230x150宽高大小</p>
          </div>
        </div>
        <div v-if="projectImagesSmailStatus" class="imgListSmail">
          <div>
            <img :src="params.smallCoverImage" alt>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click='add' type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import { ajax } from "@/api";
import { parseTime } from "@/utils";
import { getToken } from "@/utils/auth";
import Tinymce from "@/components/Tinymce";
export default {
  name: "informationDetails",
  data() {
    return {
      disabled:false,
      projectImages:'大封面',
      projectImgList:[{
        value:'大封面',
        text:'大封面'
      },{
        value:'小封面',
        text:'小封面'
      }],
      projectImagesStatus:false,
      projectImagesSmailStatus:false,
      uploadAction: process.env.BASE_API + "file.upload",
      params: {
        newsId: "",
        newsType: "",
        title: "",
        content: "",
        source: "",
        bigCoverImage: "",
        smallCoverImage: "",
        hot: false,
        queue: "",
        token: getToken()
      },
      options: [
        {
          text: "资讯类",
          value: "normal"
        },
        // {
        //   text: "公告类",
        //   value: "notice"
        // },
        // {
        //   text: "连接类",
        //   value: "hidden"
        // }
      ],
      paramsDetails:{
        targetId:''
      }
    };
  },
  methods: {
    changeImg(){
      if(this.projectImages === '大封面'){
        this.params.bigCoverImage = '';
        this.params.smallCoverImage = '';
      }else{
        this.params.smallCoverImage = '';
        this.params.bigCoverImage = '';
      }
    },
    //资讯详情
    getInfomation(){
      this.paramsDetails.targetId = this.$route.params.formationId;
      ajax('newsDetail',this.paramsDetails).then(res => {
        if(res.data.status){
          this.params =  {
            newsId: res.data.data.id,
            newsType: res.data.data.type.value,
            title: res.data.data.info.title,
            content: res.data.data.info.content,
            source: res.data.data.info.source,
            bigCoverImage: res.data.data.info.bigCoverImage,
            smallCoverImage: '',
            hot: res.data.data.hot,
            queue: res.data.data.queue,
            token: getToken()
          };
          if(res.data.data.info.bigCoverImage !== '' || res.data.data.info.projectImagesSmailStatus !== ''){
            this.disabled = true;
          }
          if(res.data.data.info.bigCoverImage !== ''){
            this.projectImagesStatus = true;
          }
          if(res.data.data.info.projectImagesSmailStatus !== ''){
            this.projectImagesSmailStatus = true;
          }
        }
      });
    },
    //新添加资讯 / 编辑
    add(){
      if(this.vails() === undefined){
        ajax('newsEdit',this.params).then((res) => {
            if(res.data.status){
              this.disabled = true;
              this.$message.success('保存成功');
              this.$router.go(-1);
            }else{
              this.$message.error(res.data.message);
            }
        });
      }
      
    },
    //判断
    vails(){
      if(this.params.title === ''){
        return this.$message.error('请输入标题');
      }
      if(this.params.newsType === ''){
        return this.$message.error('请选择资讯分类');
      }
      
      if(this.params.content === ''){
        return this.$message.error('请输入详情');
      }
      if(this.params.source === ''){
        return this.$message.error('请输入来源');
      }

      if(this.params.hot){
        if(this.projectImages === '小封面' || this.params.bigCoverImage === ''){
          return this.$message.error('热门资讯需上传大封面');
        }
      }
      // if(this.projectImages === '大封面' && this.params.bigCoverImage === ''){
      //   return this.$message.error('请上传大封面');
      // }
      // if(this.projectImages === '小封面' && this.params.smallCoverImage === ''){
      //   return this.$message.error('请上传小封面');
      // }
    },
    handleAvatarBigSuccess(res) {
      if(res.status){
        this.projectImagesStatus = true;
        this.params.bigCoverImage = res.data;
      }
    },
    handleAvatarSmailSuccess(res) {
      if(res.status){
        this.projectImagesSmailStatus = true;
        this.params.smallCoverImage = res.data;
      }
    }
  },
  components: {
    Tinymce
  },
  mounted(){
    if(this.$route.params.formationId > 0){
      this.getInfomation();
    }
  }
};
</script>

<style lang="less" scoped>
.details {
  padding: 1rem;
  .voucher {
    display: flex;
    margin-top: 1rem;
    .voucherText {
      margin-left: 1rem;
      p {
        margin: 0;
      }
    }
  }
  .submit {
    margin: 1rem 0;
  }
  .imgListBig{
    margin: 1rem 0;
    div {
      width: 670px;
      height: 376px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      text-align: center;
      color: red;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .imgListSmail{
    margin: 1rem 0;
    div {
      width: 230px;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

